<template>
  <div class="app-container">
    <!-- 搜索区 -->
    <el-form :model="queryParam" ref="queryForm" size="small" :inline="true">

      <el-form-item label="客户分类" prop="cusCateId">
        <el-select v-model="queryParam.cusCateId" placeholder="客户分类" clearable>
          <el-option
            v-for="dict in dict.type.customer_class"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>



      <el-form-item label="姓名" prop="name">
        <el-input v-model="queryParam.name" placeholder="请输入姓名" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="电话" prop="phone">
        <el-input v-model="queryParam.phone" placeholder="请输入电话" clearable style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>




      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <!--功能区-->
        <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  v-hasPermi='["info:customer:add"]'
                  icon="el-icon-plus"
                  size="mini"
                  @click="handleAdd()"
                >新增</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="success"
                  plain
                  v-hasPermi='["info:customer:edit"]'
                  icon="el-icon-edit"
                  size="mini"
                  :disabled="single"
                  @click="handleUpdate()"
                >修改</el-button>
              </el-col>

        </el-row>


    <el-table :data="tableData.rows" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-row :gutter="10">
                  <el-col :span="8">
                     <el-form-item label="邮箱:">
                        <span>{{ props.row.email }}</span>
                      </el-form-item>
                  </el-col>

                  <el-col :span="8">
                     <el-form-item label="销售员工:">
                        <span>{{ props.row.salesName }}</span>
                      </el-form-item>
                  </el-col>

                  <el-col :span="8">
                     <el-form-item label="推荐人:">
                        <span>{{ props.row.recommender }}</span>
                      </el-form-item>
                  </el-col>



                  <el-col :span="24">
                     <el-form-item label="客户地址:">
                        <span>{{ props.row.address }}</span>
                      </el-form-item>
                  </el-col>

                   <el-col :span="24">
                      <el-form-item label="备注:">
                         <span>{{ props.row.remark }}</span>
                       </el-form-item>
                   </el-col>


                </el-row>

              </el-form>
            </template>
          </el-table-column>
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="cusCateName" label="客户分类"  />
      <el-table-column prop="componeyName" label="公司名称"  />
      <el-table-column prop="name" label="联系人" />
      <el-table-column prop="genderName" label="性别"  />
      <el-table-column prop="birthday" label="出生日期"  />
      <el-table-column prop="phone" label="联系电话"  />
      <el-table-column prop="customerSourceName" label="客户来源"  />


      <el-table-column label="操作" align="center"  class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" v-hasPermi='["info:customer:edit"]' icon="el-icon-edit" @click="handleUpdate(scope.row)" >修改</el-button>

        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <el-pagination v-if="tableData.total>0" :current-page="queryParam.page" :page-sizes="[1, 5, 10, 20,30,50,100]"
      :page-size="queryParam.size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />



     <!-- 新增和修改对话框-->
     <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body :close-on-click-modal="false" :before-close="cancelForm">
        <el-form ref="form" :model="form"   label-width="100px">
          <el-row :gutter="10">

             <el-col :span="8">
               <el-form-item   label="客户分类" prop="cusCateId"  :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
                <el-select v-model="form.cusCateId" placeholder="客户分类" @change="changeCustomerSelect">
                  <el-option
                    v-for="dict in dict.type.customer_class"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
               </el-form-item>
             </el-col>

             <el-col :span="16" v-if="form.cusCateId && form.cusCateId==='1'">
                <company  :item="form"  @callback="chooseCompany"></company>
             </el-col>

             <el-col :span="8">
               <el-form-item   label="性别" prop="gender"  :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
                <el-select v-model="form.gender" placeholder="客户分类" >
                  <el-option
                    v-for="dict in dict.type.sys_user_sex"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
               </el-form-item>
             </el-col>

              <el-col :span="8">
                <el-form-item   label="联系人" prop="name"  :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
                  <el-input v-model="form.name" placeholder="请输入联系人"  />
                </el-form-item>
              </el-col>

            <el-col :span="8">
              <el-form-item   label="联系电话" prop="phone"  :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
                <el-input v-model="form.phone" placeholder="请输入联系电话"  />
              </el-form-item>
            </el-col>

             <el-col :span="8">
              <el-form-item   label="出生日期" prop="birthday" :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]" >
                <el-date-picker
                     v-model="form.birthday"
                     type="date"
                     value-format="yyyy-MM-dd"
                     placeholder="选择日期">
                   </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item   label="邮箱" prop="email"  >
                <el-input v-model="form.email" placeholder="请输入邮箱"  />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item   label="客户来源" prop="customerSource"  :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
               <el-select v-model="form.customerSource" placeholder="客户分类" >
                 <el-option
                   v-for="dict in dict.type.customer_source"
                   :key="dict.value"
                   :label="dict.label"
                   :value="dict.value"
                 />
               </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item   label="推荐人" prop="recommender"  >
                <el-input v-model="form.recommender" placeholder="请输入推荐人"  />
              </el-form-item>
            </el-col>


            <el-col :span="8">
              <el-form-item   label="销售员工" prop="salesId"  :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
               <el-select v-model="form.salesId" placeholder="销售员工" >
                 <el-option
                   v-for="item in salesList"
                   :key="item.userId"
                   :label="item.nickName"
                   :value="item.userId"
                 >
                  <span style="float: left">{{ item.nickName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.deptName }}</span>
                 </el-option>
               </el-select>
              </el-form-item>
            </el-col>



           <el-col :span="24">
              <el-form-item   label="联系地址" prop="address"  >
                <el-input v-model="form.address" placeholder="请输入联系地址"  />
              </el-form-item>
            </el-col>

            <el-col :span="24">
               <el-form-item   label="备注" prop="remark"  >
                 <el-input  type="textarea"  :rows="2"     placeholder="请输入内容" v-model="form.remark"></el-input>
               </el-form-item>
             </el-col>

          </el-row>


        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancelForm">取 消</el-button>
        </div>
     </el-dialog>


  </div>
</template>

<script>
  import PageMixin from '@/mixins/PageMixin.js'
  import AddOrEditMixin from '@/mixins/AddOrEditMixin.js'
  import {dataApi, addApi, editApi, findByIdApi} from '@/api/info/customer.js'
  import {getAllUser} from '@/api/system/user.js'
  // 引用自定义组件
  import company from '@/components/Compnay/index.vue'
  export default {
    mixins: [PageMixin, AddOrEditMixin],
    // 挂载组件
    components:{
      company
    },
    // 查询通用字典中的键
    dicts: ['customer_class','sys_user_sex','customer_source'],
    data() {

      return {
        // 查询函数
        fetchDataApi: dataApi,
        // 新增函数
        addApi: addApi,
         // 新增函数
        editApi: editApi,
         // 新增函数
        findByIdApi: findByIdApi,
        primaryKey: 'id',
        //头像放到表单哪个字段里面
        uploadField: undefined,
        // 内部销售员工
        salesList: []
      }
    },
    methods: {
      // 重置表单
      initFormValue(){
        this.form= {
          status: '1'
        }
      },
      handleExcel(){
       // this.download('/api/employee/download',this.queryParam,'employee_data.xlsx')
      },
      //公司组件选择中的信息
      chooseCompany(row){
        this.form.componeyId= row.id
      },
      // 客户分类select发生变化
      changeCustomerSelect(row){
        this.form.componeyId=undefined
      },
      loadSalesUser(){
        getAllUser().then(resp=> {
          console.log(resp)
          this.salesList= resp.data
        })
      }

    },
    created(){
      this.initFormValue()
      this.loadSalesUser()
    }

  }
</script>

<style>
</style>
